<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Natter 管理界面</title>
    <style>
        /* 基础样式重置和变量 */
        :root {
            --primary-color: #667eea;
            --primary-dark: #5a6fd8;
            --secondary-color: #6c757d;
            --success-color: #28a745;
            --danger-color: #dc3545;
            --warning-color: #ffc107;
            --info-color: #17a2b8;
            --light-color: #f8f9fa;
            --dark-color: #343a40;
            --border-color: #dee2e6;
            --shadow-color: rgba(0, 0, 0, 0.1);
            --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-family);
            line-height: 1.5;
            color: #333;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        /* Logo区域 */
        .logo-section {
            width: 100%;
            text-align: center;
            margin: 32px 0 8px 0;
        }

        .logo-section img {
            height: 56px;
            max-width: 90vw;
            filter: drop-shadow(0 2px 8px rgba(0, 230, 195, 0.3));
        }

        /* 头部样式 */
        header {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            padding: 2rem;
            margin-bottom: 2rem;
            text-align: center;
        }

        header h1 {
            color: var(--primary-color);
            margin-bottom: 0.5rem;
            font-size: 2.5rem;
            font-weight: 600;
        }

        header p {
            color: var(--secondary-color);
            margin-bottom: 1rem;
            font-size: 1.1rem;
        }

        .header-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 10px;
            flex-wrap: wrap;
        }

        /* 卡片样式 */
        .card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            padding: 2rem;
            margin-bottom: 2rem;
            border: none;
        }

        .card h2 {
            color: var(--primary-color);
            margin-bottom: 1.5rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid var(--border-color);
            font-size: 1.8rem;
            font-weight: 600;
        }

        /* 按钮样式 */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 20px;
            border: none;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            text-decoration: none;
            transition: all 0.3s ease;
            text-align: center;
            line-height: 1;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .btn:active {
            transform: translateY(0);
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            color: white;
        }

        .btn-secondary {
            background: linear-gradient(135deg, var(--secondary-color) 0%, #5a6268 100%);
            color: white;
        }

        .btn-danger {
            background: linear-gradient(135deg, var(--danger-color) 0%, #c82333 100%);
            color: white;
        }

        .btn-warning {
            background: linear-gradient(135deg, var(--warning-color) 0%, #e0a800 100%);
            color: #212529;
        }

        .btn-info {
            background: linear-gradient(135deg, var(--info-color) 0%, #138496 100%);
            color: white;
        }

        .btn-success {
            background: linear-gradient(135deg, var(--success-color) 0%, #218838 100%);
            color: white;
        }

        .btn-guest {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }

        .settings-btn {
            background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
            color: white;
        }

        .logout-btn {
            background: linear-gradient(135deg, var(--secondary-color) 0%, var(--danger-color) 100%);
            color: white;
        }

        .btn-small {
            padding: 8px 12px;
            font-size: 12px;
        }

        .btn:disabled {
            background: #e9ecef;
            color: #6c757d;
            cursor: not-allowed;
            opacity: 0.65;
        }

        .btn:disabled:hover {
            transform: none;
            box-shadow: none;
        }

        /* 表单样式 */
        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: var(--dark-color);
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid var(--border-color);
            border-radius: 12px;
            font-size: 14px;
            transition: all 0.3s ease;
            background-color: rgba(255, 255, 255, 0.8);
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
        }

        .form-group textarea {
            min-height: 100px;
            resize: vertical;
        }

        .form-group small {
            display: block;
            margin-top: 0.5rem;
            color: var(--secondary-color);
            font-size: 12px;
        }

        /* 表单选项卡 */
        .form-tabs {
            display: flex;
            margin-bottom: 1.5rem;
            border-bottom: 2px solid var(--border-color);
            border-radius: 12px 12px 0 0;
            overflow: hidden;
        }

        .tab {
            flex: 1;
            padding: 12px 20px;
            cursor: pointer;
            font-weight: 500;
            color: var(--secondary-color);
            background: var(--light-color);
            border: none;
            transition: all 0.3s ease;
            text-align: center;
        }

        .tab:hover {
            color: var(--primary-color);
            background: rgba(102, 126, 234, 0.1);
        }

        .tab.active {
            color: white;
            background: var(--primary-color);
        }

        .tab-content {
            padding: 1rem 0;
        }

        /* 服务列表样式 */
        .services-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .loading {
            text-align: center;
            font-style: italic;
            color: var(--secondary-color);
            grid-column: 1 / -1;
            padding: 3rem;
            font-size: 1.1rem;
        }

        .service-card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            transition: all 0.3s ease;
            border: 1px solid var(--border-color);
            position: relative;
        }

        .service-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
            border-color: var(--primary-color);
        }

        .service-card-header {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            padding: 1.25rem;
            border-bottom: 1px solid var(--border-color);
        }

        .service-title-section {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .service-title {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin: 0;
            font-size: 1.1rem;
            font-weight: 600;
        }

        .service-remark-display {
            flex: 1;
            color: var(--dark-color);
        }

        .service-address-display {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin: 0;
            font-size: 0.9rem;
            color: var(--secondary-color);
        }

        .address-label {
            font-weight: 500;
            min-width: fit-content;
        }

        .service-address {
            flex: 1;
            font-family: 'Courier New', monospace;
            background: rgba(0, 123, 255, 0.1);
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 0.85rem;
            color: var(--primary-color);
            font-weight: 500;
        }

        .btn-icon {
            background: none;
            border: none;
            padding: 4px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 0.9rem;
        }

        .btn-icon:hover {
            background: rgba(0, 0, 0, 0.1);
            transform: scale(1.1);
        }

        .service-card-body {
            padding: 1.25rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .service-metrics {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
        }

        .metric-item {
            text-align: center;
            padding: 0.75rem 0.5rem;
            background: var(--light-color);
            border-radius: 10px;
            border: 1px solid var(--border-color);
        }

        .metric-label {
            display: block;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--secondary-color);
            margin-bottom: 0.25rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .metric-value {
            display: block;
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--dark-color);
        }

        .service-info {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .info-row {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.9rem;
        }

        .info-label {
            font-weight: 500;
            color: var(--secondary-color);
            min-width: fit-content;
        }

        .service-group-text,
        .service-cmd-text {
            flex: 1;
            color: var(--dark-color);
            word-break: break-all;
        }

        .service-cmd-text {
            font-family: 'Courier New', monospace;
            background: rgba(108, 117, 125, 0.1);
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 0.8rem;
        }

        .service-card-actions {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            margin-top: 0.5rem;
        }

        .action-group {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .primary-actions {
            justify-content: flex-start;
        }

        .danger-actions {
            justify-content: flex-end;
        }

        .btn-sm {
            padding: 0.5rem 0.75rem;
            font-size: 0.85rem;
            border-radius: 8px;
            font-weight: 500;
            transition: all 0.2s ease;
            border: 1px solid transparent;
        }

        .btn-outline-danger {
            background: transparent;
            border-color: var(--danger-color);
            color: var(--danger-color);
        }

        .btn-outline-danger:hover {
            background: var(--danger-color);
            color: white;
        }

        .service-status {
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .service-status-running {
            background: rgba(40, 167, 69, 0.15);
            color: var(--success-color);
            border: 1px solid var(--success-color);
        }

        .service-status-stopped {
            background: rgba(220, 53, 69, 0.15);
            color: var(--danger-color);
            border: 1px solid var(--danger-color);
        }

        .service-status-unknown {
            background: rgba(108, 117, 125, 0.15);
            color: var(--secondary-color);
            border: 1px solid var(--secondary-color);
        }

        /* 服务详情页样式 */
        .service-details {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .detail-row {
            display: flex;
            align-items: flex-start;
            padding: 1rem;
            background: var(--light-color);
            border-radius: 10px;
            border: 1px solid var(--border-color);
        }

        .detail-row label {
            width: 140px;
            font-weight: 600;
            color: var(--dark-color);
            margin-bottom: 0;
        }

        .detail-row>span,
        .detail-row>div {
            flex: 1;
        }

        /* 状态面板 */
        .status-panel {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .status-item {
            padding: 1.5rem;
            background: white;
            border-radius: 15px;
            border: 1px solid var(--border-color);
            text-align: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }

        .status-label {
            font-weight: 500;
            margin-bottom: 0.5rem;
            color: var(--secondary-color);
        }

        .status-value {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--dark-color);
        }

        /* 输出日志 */
        .output-container {
            margin-bottom: 2rem;
        }

        .output-log {
            background: #1e1e1e;
            color: #d4d4d4;
            border-radius: 12px;
            padding: 1.5rem;
            max-height: 400px;
            overflow-y: auto;
            font-family: 'Courier New', monospace;
            font-size: 13px;
            white-space: pre-wrap;
            border: 1px solid var(--border-color);
        }

        /* 新的服务详情样式 */
        .service-details-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem;
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            color: white;
            border-radius: 15px;
            margin-bottom: 2rem;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .service-details-header h2 {
            margin: 0;
            font-size: 1.8rem;
            font-weight: 600;
        }

        .service-id-badge {
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, 0.2);
            padding: 8px 16px;
            border-radius: 20px;
            backdrop-filter: blur(10px);
        }

        .service-id-label {
            font-size: 0.9rem;
            opacity: 0.9;
        }

        .service-id-value {
            font-weight: 600;
            font-family: monospace;
        }

        .service-details-content {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        .detail-section {
            background: white;
            border-radius: 15px;
            padding: 1.5rem;
            border: 1px solid var(--border-color);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }

        .section-title {
            margin: 0 0 1.5rem 0;
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--dark-color);
            display: flex;
            align-items: center;
            gap: 8px;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid var(--light-color);
        }

        /* 基本信息网格 */
        .detail-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
        }

        .detail-item {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .detail-item label {
            font-weight: 600;
            color: var(--secondary-color);
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .status-badge {
            display: inline-block;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 600;
            text-transform: uppercase;
        }

        .address-text {
            font-family: monospace;
            background: var(--light-color);
            padding: 8px 12px;
            border-radius: 8px;
            word-break: break-all;
            color: var(--dark-color);
            font-weight: 600;
            border: 1px solid var(--border-color);
        }

        .cmd-text {
            background: var(--light-color);
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 0.9rem;
            display: block;
            white-space: pre-wrap;
            word-break: break-all;
        }

        /* 配置网格 */
        .config-grid {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .config-item {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .config-item label {
            font-weight: 600;
            color: var(--secondary-color);
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .input-with-action {
            display: flex;
            gap: 10px;
            align-items: flex-start;
        }

        .input-with-action .form-control {
            flex: 1;
        }

        .address-with-action {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .address-with-action .address-text {
            flex: 1;
        }

        .toggle-with-status {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .toggle-status {
            font-weight: 500;
            color: var(--secondary-color);
        }

        .toggle-status.status-enabled {
            color: var(--success-color);
        }

        .toggle-status.status-disabled {
            color: var(--secondary-color);
        }

        /* 状态卡片网格 */
        .status-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
        }

        .status-card {
            display: flex;
            align-items: center;
            gap: 12px;
            background: var(--light-color);
            padding: 1rem;
            border-radius: 12px;
            border: 1px solid var(--border-color);
            transition: all 0.3s ease;
        }

        .status-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }

        .status-icon {
            font-size: 1.5rem;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: white;
            border-radius: 50%;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .status-content {
            flex: 1;
        }

        .status-content .status-label {
            font-size: 0.9rem;
            color: var(--secondary-color);
            margin-bottom: 4px;
            font-weight: 500;
        }

        .status-content .status-value {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--dark-color);
        }

        /* 推送操作 */
        .push-actions {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .help-text {
            color: var(--secondary-color);
            font-size: 0.85rem;
            margin-left: 8px;
        }

        /* 日志容器 */
        .log-container {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .log-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
        }

        .checkbox-label {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            font-size: 0.9rem;
            color: var(--secondary-color);
        }

        .checkbox-label input[type="checkbox"] {
            display: none;
        }

        .checkmark {
            width: 18px;
            height: 18px;
            border: 2px solid var(--border-color);
            border-radius: 4px;
            position: relative;
            transition: all 0.3s ease;
        }

        .checkbox-label input[type="checkbox"]:checked+.checkmark {
            background: var(--primary-color);
            border-color: var(--primary-color);
        }

        .checkbox-label input[type="checkbox"]:checked+.checkmark::after {
            content: '✓';
            position: absolute;
            top: -2px;
            left: 2px;
            color: white;
            font-size: 12px;
            font-weight: bold;
        }

        /* 服务操作按钮 */
        .service-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem;
            background: var(--light-color);
            border-radius: 15px;
            border: 1px solid var(--border-color);
            margin-top: 2rem;
        }

        .action-group {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .primary-actions .btn {
            min-width: 120px;
        }

        .secondary-actions .btn {
            min-width: 140px;
        }

        .nav-actions .btn {
            min-width: 120px;
        }

        /* 按钮轮廓样式 */
        .btn-outline {
            background: transparent;
            border: 2px solid var(--border-color);
            color: var(--secondary-color);
        }

        .btn-outline:hover {
            background: var(--border-color);
            color: var(--dark-color);
        }

        .btn-outline-danger {
            background: transparent;
            border: 2px solid var(--danger-color);
            color: var(--danger-color);
        }

        .btn-outline-danger:hover {
            background: var(--danger-color);
            color: white;
        }

        .copy-btn {
            white-space: nowrap;
        }

        /* 响应式优化 */
        @media (max-width: 768px) {
            .service-details-header {
                flex-direction: column;
                gap: 1rem;
                text-align: center;
            }

            .detail-grid {
                grid-template-columns: 1fr;
            }

            .status-grid {
                grid-template-columns: 1fr;
            }

            .service-actions {
                flex-direction: column;
                align-items: stretch;
            }

            .action-group {
                justify-content: center;
            }

            .input-with-action,
            .address-with-action {
                flex-direction: column;
                align-items: stretch;
            }
        }

        /* 操作按钮区域 */
        .bulk-actions,
        .action-buttons,
        .form-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: flex-end;
            margin-top: 1.5rem;
            padding-top: 1.5rem;
            border-top: 2px solid var(--border-color);
        }

        /* 开关样式 */
        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked+.slider {
            background-color: var(--primary-color);
        }

        input:checked+.slider:before {
            transform: translateX(26px);
        }

        /* 图标样式 */
        .icon {
            display: inline-block;
            margin-right: 5px;
        }

        .icon-users::before {
            content: "👥";
        }

        .icon-settings::before {
            content: "⚙️";
        }

        .icon-bell::before {
            content: "🔔";
        }

        .icon-info::before {
            content: "ℹ️";
        }

        .icon-stop::before {
            content: "⏹️";
        }

        .icon-trash::before {
            content: "🗑️";
        }

        .icon-restart::before {
            content: "🔄";
        }

        .icon-copy::before {
            content: "📋";
        }

        .icon-play::before {
            content: "▶️";
        }

        .icon-pause::before {
            content: "⏸️";
        }

        /* 对话框 */
        .dialog {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .dialog.active {
            display: flex;
        }

        .dialog-content {
            background: white;
            padding: 2rem;
            border-radius: 20px;
            max-width: 500px;
            width: 90%;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        }

        .dialog-buttons {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 1.5rem;
        }

        /* 通知样式 */
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 15px 20px;
            border-radius: 12px;
            color: white;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
            opacity: 0;
            transform: translateY(-20px);
            transition: all 0.3s ease;
            z-index: 9999;
            max-width: 350px;
        }

        .notification.show {
            opacity: 1;
            transform: translateY(0);
        }

        .notification.success {
            background: var(--success-color);
        }

        .notification.error {
            background: var(--danger-color);
        }

        .notification.warning {
            background: var(--warning-color);
            color: #333;
        }

        .notification.info {
            background: var(--info-color);
        }

        /* 页脚 */
        footer {
            text-align: center;
            padding: 2rem 1rem;
            color: rgba(255, 255, 255, 0.8);
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            margin-top: 2rem;
        }

        footer a {
            color: rgba(255, 255, 255, 0.9);
            text-decoration: none;
            font-weight: 500;
        }

        footer a:hover {
            color: white;
            text-decoration: underline;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }

            .header-actions {
                justify-content: center;
                flex-direction: column;
                gap: 8px;
            }

            .services-list {
                grid-template-columns: 1fr;
            }

            .form-tabs {
                flex-direction: column;
            }

            .tab {
                border-bottom: 1px solid var(--border-color);
            }

            .status-panel {
                grid-template-columns: 1fr;
            }

            .bulk-actions,
            .action-buttons,
            .form-actions {
                flex-direction: column;
                align-items: stretch;
            }

            .btn {
                width: 100%;
                justify-content: center;
            }

            header h1 {
                font-size: 2rem;
            }

            .card {
                padding: 1.5rem;
            }
        }

        /* 动画效果 */
        .fade-in {
            animation: fadeIn 0.5s ease-in;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 加载动画 */
        .loading-spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* 分组管理样式 */
        .groups-management {
            margin-bottom: 1.5rem;
        }

        .group-input-container {
            display: flex;
            gap: 10px;
            align-items: flex-end;
        }

        .group-input-container input {
            flex: 1;
        }

        .groups-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .group-card {
            background: var(--light-color);
            border: 2px solid var(--border-color);
            border-radius: 12px;
            padding: 1.5rem;
            transition: all 0.3s ease;
        }

        .group-card:hover {
            border-color: var(--primary-color);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }

        .group-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .group-name {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--dark-color);
        }

        .group-service-count {
            background: var(--primary-color);
            color: white;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.8rem;
            font-weight: 500;
        }

        .group-services-list {
            margin-bottom: 1rem;
        }

        .group-service-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 0;
            border-bottom: 1px solid var(--border-color);
        }

        .group-service-item:last-child {
            border-bottom: none;
        }

        .group-actions {
            display: flex;
            gap: 8px;
            justify-content: flex-end;
        }

        /* 分组密码显示样式 */
        .group-password-section {
            margin: 1rem 0;
            padding: 0.75rem;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 8px;
            border: 1px solid var(--border-color);
        }

        .password-display {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .password-label {
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--secondary-color);
        }

        .password-field {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .password-value {
            flex: 1;
            font-family: monospace;
            background: var(--light-color);
            padding: 6px 10px;
            border-radius: 6px;
            border: 1px solid var(--border-color);
            font-size: 0.9rem;
            color: var(--dark-color);
            min-height: 32px;
            display: flex;
            align-items: center;
        }

        .password-value.visible {
            color: var(--primary-color);
            font-weight: 500;
        }

        .password-toggle-btn {
            background: var(--light-color);
            border: 1px solid var(--border-color);
            padding: 6px 8px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 0.9rem;
        }

        .password-toggle-btn:hover {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        /* 修改密码对话框样式 */
        .password-edit-dialog {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1001;
            justify-content: center;
            align-items: center;
        }

        .password-edit-dialog.active {
            display: flex;
        }

        .password-edit-content {
            background: white;
            padding: 2rem;
            border-radius: 15px;
            max-width: 400px;
            width: 90%;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        }

        .password-edit-content h3 {
            margin: 0 0 1.5rem 0;
            color: var(--dark-color);
        }

        .current-password-display {
            background: var(--light-color);
            padding: 0.75rem;
            border-radius: 8px;
            margin-bottom: 1rem;
            border: 1px solid var(--border-color);
        }

        .current-password-display label {
            font-size: 0.9rem;
            color: var(--secondary-color);
            margin-bottom: 0.5rem;
            display: block;
        }

        .current-password-display .password-text {
            font-family: monospace;
            color: var(--primary-color);
            font-weight: 500;
        }

        .batch-operations {
            background: var(--light-color);
            border-radius: 12px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .batch-controls {
            display: flex;
            align-items: flex-start;
            gap: 20px;
            flex-wrap: wrap;
            margin-bottom: 1rem;
        }

        .batch-select-container {
            flex: 1;
            min-width: 200px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .batch-select-container label {
            font-weight: 600;
            color: var(--dark-color);
            font-size: 0.9rem;
        }

        .batch-select-container select {
            width: 100%;
            padding: 8px 12px;
            border: 2px solid var(--border-color);
            border-radius: 8px;
            background: white;
            font-size: 0.9rem;
            transition: border-color 0.3s ease;
        }

        .batch-select-container select:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
        }

        .source-services-preview,
        .target-services-info {
            min-height: 60px;
            padding: 8px 12px;
            background: white;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            font-size: 0.85rem;
            color: var(--secondary-color);
        }

        .services-preview-list {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .service-preview-item {
            padding: 4px 8px;
            background: var(--light-color);
            border-radius: 4px;
            font-size: 0.8rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .service-preview-address {
            font-weight: 500;
            color: var(--dark-color);
        }

        .service-preview-status {
            font-size: 0.75rem;
            padding: 2px 6px;
            border-radius: 3px;
            background: var(--border-color);
            color: var(--secondary-color);
        }

        .batch-arrow {
            font-size: 1.8rem;
            color: var(--primary-color);
            font-weight: bold;
            align-self: center;
            margin-top: 20px;
        }

        .batch-action-area {
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: center;
        }

        .batch-preview {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 6px;
            padding: 8px 12px;
            text-align: center;
        }

        .preview-summary {
            font-size: 0.9rem;
            color: var(--secondary-color);
        }

        .batch-controls select {
            flex: unset;
            min-width: unset;
        }

        /* 空服务列表样式 */
        .empty-services-message {
            grid-column: 1 / -1;
            text-align: center;
            padding: 3rem 2rem;
            background: white;
            border-radius: 20px;
            border: 2px dashed var(--border-color);
            color: var(--secondary-color);
            font-size: 1.1rem;
            font-weight: 500;
        }

        .empty-services-message::before {
            content: "📋";
            display: block;
            font-size: 3rem;
            margin-bottom: 1rem;
        }

        /* 状态颜色设置 */
        .metric-value.status-good {
            color: var(--success-color) !important;
        }

        .metric-value.status-warning {
            color: var(--warning-color) !important;
        }

        .metric-value.status-error {
            color: var(--danger-color) !important;
        }

        .metric-value.status-info {
            color: var(--info-color) !important;
        }

        /* 按钮尺寸优化 */
        .btn-info {
            background-color: var(--info-color);
            border-color: var(--info-color);
            color: white;
        }

        .btn-info:hover {
            background-color: #138496;
            border-color: #117a8b;
        }

        .btn-warning {
            background-color: var(--warning-color);
            border-color: var(--warning-color);
            color: #212529;
        }

        .btn-warning:hover {
            background-color: #e0a800;
            border-color: #d39e00;
        }
    </style>
</head>

<body>
    <!-- Logo区域 -->
    <div class="logo-section">
        <img src="await-logo.svg" alt="Await Logo" onerror="this.style.display='none';">
    </div>

    <div class="container">
        <header class="fade-in">
            <h1>Natter 管理界面</h1>
            <p>管理您的Natter服务</p>
            <div class="header-actions">
                <button id="guest-entrance-btn" class="btn btn-guest" title="访客入口"
                    onclick="window.open('/guest.html', '_blank')">
                    <span class="icon icon-users"></span> 访客入口
                </button>
                <button id="groups-management-btn" class="btn settings-btn" title="服务组管理">
                    <span class="icon icon-settings"></span> 服务组管理
                </button>
                <button id="iyuu-settings-btn" class="btn settings-btn" title="IYUU推送设置" style="display: none;">
                    <span class="icon icon-bell"></span> 推送设置
                </button>
                <button id="logout-btn" class="btn logout-btn" style="display: none;">退出登录</button>
            </div>
        </header>

        <main>
            <section class="card fade-in" id="services-panel">
                <h2>运行中的服务</h2>
                <div class="services-list" id="services-list">
                    <div class="loading">
                        <div class="loading-spinner"></div>
                        加载中...
                    </div>
                </div>
                <div class="bulk-actions">
                    <button id="refresh-all-btn" class="btn btn-secondary">刷新所有</button>
                    <button id="stop-all-btn" class="btn btn-danger">停止所有服务</button>
                </div>
            </section>

            <section class="card" id="new-service-panel">
                <h2>新建服务</h2>
                <form id="new-service-form">
                    <div class="form-group">
                        <label for="service-mode">服务模式:</label>
                        <select id="service-mode">
                            <option value="basic">基础模式</option>
                            <option value="advanced">高级模式</option>
                        </select>
                    </div>

                    <div id="basic-mode-options">
                        <div class="form-tabs">
                            <div class="tab active" data-tab="essential">基本设置</div>
                            <div class="tab" data-tab="network">网络设置</div>
                            <div class="tab" data-tab="advanced">高级设置</div>
                        </div>

                        <div class="tab-content" id="essential-tab">
                            <div class="form-group">
                                <label for="target-port">目标端口:</label>
                                <input type="number" id="target-port" placeholder="例如: 80">
                                <small>要转发的本地服务端口</small>
                            </div>

                            <div class="form-group">
                                <label for="target-ip">目标IP地址:</label>
                                <input type="text" id="target-ip" placeholder="可选, 默认为 127.0.0.1">
                                <small>要转发的本地服务IP地址</small>
                            </div>

                            <div class="form-group">
                                <label for="service-remark">服务备注:</label>
                                <input type="text" id="service-remark" placeholder="可选，为服务添加备注">
                                <small>帮助您区分不同的服务</small>
                            </div>

                            <div class="form-group">
                                <label for="service-group">服务分组:</label>
                                <select id="service-group">
                                    <option value="">默认分组</option>
                                </select>
                                <small>选择服务所属的分组，便于组织管理</small>
                            </div>

                            <div class="form-group">
                                <label for="new-service-auto-restart">
                                    <input type="checkbox" id="new-service-auto-restart" checked>
                                    启用自动重启
                                </label>
                                <small>当服务异常退出时自动重新启动</small>
                            </div>

                            <div class="form-group">
                                <label for="udp-mode">
                                    <input type="checkbox" id="udp-mode">
                                    使用UDP模式
                                </label>
                                <small>选择协议类型，默认为TCP</small>
                            </div>

                            <div class="form-group">
                                <label for="forward-method">转发方法:</label>
                                <span class="forward-method-info">
                                    <span class="info-icon">?</span>
                                    <div class="info-tooltip">
                                        <h4>转发方法说明</h4>
                                        <ul>
                                            <li>
                                                <span class="method-name">socket (内置)</span>
                                                <div>纯Python实现，无需额外依赖</div>
                                                <div class="best-for">适用于: 通用场景，最简单的设置</div>
                                            </li>
                                            <li>
                                                <span class="method-name">iptables</span>
                                                <div>使用Linux的iptables进行转发，需要root权限</div>
                                                <div class="best-for">适用于: Linux系统，需要高性能转发</div>
                                            </li>
                                            <li>
                                                <span class="method-name">nftables</span>
                                                <div>使用Linux的nftables进行转发，需要root权限</div>
                                                <div class="best-for">适用于: 新版Linux系统，功能更强大</div>
                                                <div class="compatibility-note"
                                                    style="color:#ff6b6b;font-size:0.9em;margin-top:4px;">注意:
                                                    在Docker容器中使用可能不稳定</div>
                                            </li>
                                            <li>
                                                <span class="method-name">socat</span>
                                                <div>使用socat工具转发，需要安装socat</div>
                                                <div class="best-for">适用于: 需要高级转发功能但无root权限</div>
                                            </li>
                                            <li>
                                                <span class="method-name">gost</span>
                                                <div>使用gost工具转发，需要安装gost</div>
                                                <div class="best-for">适用于: 需要加密转发、代理等高级功能</div>
                                            </li>
                                        </ul>
                                    </div>
                                </span>
                                <select id="forward-method">
                                    <option value="socket">socket (内置)</option>
                                    <option value="iptables">iptables (需要root权限)</option>
                                    <option value="nftables" disabled title="Docker环境中不支持">nftables (Docker中不可用)
                                    </option>
                                    <option value="socat">socat (需要安装)</option>
                                    <option value="gost">gost (需要安装)</option>
                                </select>
                                <small>不同转发方法适用于不同场景，鼠标悬停在问号上查看详情</small>
                                <div class="tool-install-buttons">
                                    <button type="button" id="install-socat-btn"
                                        class="btn btn-small btn-secondary">安装socat</button>
                                    <button type="button" id="install-gost-btn"
                                        class="btn btn-small btn-secondary">安装gost</button>
                                </div>
                            </div>
                        </div>

                        <div class="tab-content" id="network-tab" style="display:none;">
                            <div class="form-group">
                                <label for="bind-interface">绑定接口:</label>
                                <input type="text" id="bind-interface" placeholder="接口名称或IP地址">
                                <small>网络接口名称或IP地址，默认为所有接口</small>
                            </div>

                            <div class="form-group">
                                <label for="bind-port">绑定端口:</label>
                                <input type="number" id="bind-port" placeholder="端口号">
                                <small>可选，指定绑定端口号</small>
                            </div>

                            <div class="form-group">
                                <label for="use-upnp">
                                    <input type="checkbox" id="use-upnp">
                                    启用UPnP/IGD发现
                                </label>
                                <small>尝试通过UPnP协议配置路由器</small>
                            </div>
                        </div>

                        <div class="tab-content" id="advanced-tab" style="display:none;">
                            <div class="form-group">
                                <label for="stun-server">STUN服务器:</label>
                                <input type="text" id="stun-server" placeholder="hostname:port">
                                <small>用于NAT类型检测和映射的STUN服务器</small>
                            </div>

                            <div class="form-group">
                                <label for="keepalive-server">保活服务器:</label>
                                <input type="text" id="keepalive-server" placeholder="hostname:port">
                                <small>用于保持NAT映射的服务器</small>
                            </div>

                            <div class="form-group">
                                <label for="keepalive-interval">保活间隔(秒):</label>
                                <input type="number" id="keepalive-interval" placeholder="例如: 30">
                                <small>发送保活包的间隔时间</small>
                            </div>

                            <div class="form-group">
                                <label for="notification-script">通知脚本:</label>
                                <input type="text" id="notification-script" placeholder="脚本路径">
                                <small>地址映射变更时执行的脚本</small>
                            </div>

                            <div class="form-group">
                                <label for="retry-mode">
                                    <input type="checkbox" id="retry-mode">
                                    持续重试直到目标端口打开
                                </label>
                                <small>启用持续重试机制</small>
                            </div>

                            <div class="form-group">
                                <label for="quit-on-change">
                                    <input type="checkbox" id="quit-on-change">
                                    映射地址变更时退出
                                </label>
                                <small>当映射地址发生变化时自动退出程序</small>
                            </div>

                            <div class="form-group">
                                <label for="auto-restart">
                                    <input type="checkbox" id="auto-restart" checked>
                                    启用自动重启
                                </label>
                                <small>服务停止时自动重新启动</small>
                            </div>
                        </div>
                    </div>

                    <div id="advanced-mode-options" style="display:none;">
                        <div class="form-group">
                            <label for="custom-command">自定义命令:</label>
                            <textarea id="custom-command"
                                placeholder="输入完整的natter命令，例如：--bind-port 8080 --target-port 80"></textarea>
                            <small>高级用户可以直接输入natter的完整参数</small>
                        </div>
                    </div>

                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">
                            <span class="icon icon-play"></span>
                            启动服务
                        </button>
                    </div>
                </form>
            </section>

            <section class="card" id="service-details-panel" style="display:none;">
                <div class="service-details-header">
                    <h2>服务详情</h2>
                    <div class="service-id-badge">
                        <span class="service-id-label">ID:</span>
                        <span id="service-id" class="service-id-value"></span>
                    </div>
                </div>

                <div class="service-details-content">
                    <!-- 基本信息 -->
                    <div class="detail-section">
                        <h3 class="section-title">📊 基本信息</h3>
                        <div class="detail-grid">
                            <div class="detail-item">
                                <label>状态</label>
                                <span id="service-status" class="status-badge"></span>
                            </div>
                            <div class="detail-item">
                                <label>运行时间</label>
                                <span id="service-runtime"></span>
                            </div>
                            <div class="detail-item">
                                <label>映射地址</label>
                                <div class="address-with-action">
                                    <span id="service-mapped-address" class="address-text"></span>
                                    <button id="copy-address-btn" class="btn btn-sm btn-outline copy-btn">
                                        <span class="icon icon-copy"></span>
                                        复制
                                    </button>
                                </div>
                            </div>
                            <div class="detail-item">
                                <label>命令参数</label>
                                <code id="service-cmd-args" class="cmd-text"></code>
                            </div>
                        </div>
                    </div>

                    <!-- 配置管理 -->
                    <div class="detail-section">
                        <h3 class="section-title">⚙️ 配置管理</h3>
                        <div class="config-grid">
                            <div class="config-item">
                                <label>服务备注</label>
                                <div class="input-with-action">
                                    <textarea id="remark-debug-area" placeholder="请输入备注" rows="2"
                                        class="form-control"></textarea>
                                    <button id="save-debug-remark-btn" class="btn btn-sm btn-primary">
                                        <span class="icon">💾</span>
                                        保存
                                    </button>
                                </div>
                            </div>
                            <div class="config-item">
                                <label>服务分组</label>
                                <div class="input-with-action">
                                    <select id="service-group-select" class="form-control">
                                        <option value="">默认分组</option>
                                    </select>
                                    <button id="save-service-group-btn" class="btn btn-sm btn-primary">
                                        <span class="icon">📁</span>
                                        更改
                                    </button>
                                </div>
                            </div>
                            <div class="config-item">
                                <label>自动重启</label>
                                <div class="toggle-with-status">
                                    <label class="switch">
                                        <input type="checkbox" id="auto-restart-toggle">
                                        <span class="slider"></span>
                                    </label>
                                    <span id="auto-restart-status" class="toggle-status">已禁用</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 网络状态 -->
                    <div class="detail-section">
                        <h3 class="section-title">🌐 网络状态</h3>
                        <div class="status-grid">
                            <div class="status-card">
                                <div class="status-icon">🏠</div>
                                <div class="status-content">
                                    <div class="status-label">LAN可用性</div>
                                    <div id="lan-status" class="status-value">检测中</div>
                                </div>
                            </div>
                            <div class="status-card">
                                <div class="status-icon">🌍</div>
                                <div class="status-content">
                                    <div class="status-label">WAN可用性</div>
                                    <div id="wan-status" class="status-value">检测中</div>
                                </div>
                            </div>
                            <div class="status-card">
                                <div class="status-icon">🔌</div>
                                <div class="status-content">
                                    <div class="status-label">NAT类型</div>
                                    <div id="nat-type" class="status-value">检测中</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 推送操作 -->
                    <div class="detail-section">
                        <h3 class="section-title">📢 推送操作</h3>
                        <div class="push-actions">
                            <button id="push-service-now" class="btn btn-sm btn-info">
                                <span class="icon">📤</span>
                                推送此服务状态
                            </button>
                            <small class="help-text">将此服务的状态信息推送到IYUU</small>
                        </div>
                    </div>

                    <!-- 日志输出 -->
                    <div class="detail-section">
                        <h3 class="section-title">📋 输出日志</h3>
                        <div class="log-container">
                            <pre id="service-output" class="output-log"></pre>
                            <div class="log-controls">
                                <button id="clear-log-btn" class="btn btn-sm btn-secondary">
                                    <span class="icon">🗑️</span>
                                    清空日志
                                </button>
                                <label class="checkbox-label">
                                    <input type="checkbox" id="auto-scroll" checked>
                                    <span class="checkmark"></span>
                                    自动滚动
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 操作按钮区域 -->
                <div class="service-actions">
                    <div class="action-group primary-actions">
                        <button id="refresh-service-btn" class="btn btn-secondary">
                            <span class="icon">🔄</span>
                            刷新
                        </button>
                        <button id="restart-service-btn" class="btn btn-warning">
                            <span class="icon">⚡</span>
                            重启服务
                        </button>
                        <button id="stop-service-btn" class="btn btn-danger">
                            <span class="icon">⏹️</span>
                            停止服务
                        </button>
                    </div>
                    <div class="action-group secondary-actions">
                        <button id="save-as-template-btn" class="btn btn-info">
                            <span class="icon">💾</span>
                            保存为模板
                        </button>
                        <button id="delete-service-btn" class="btn btn-outline-danger">
                            <span class="icon">🗑️</span>
                            删除服务
                        </button>
                    </div>
                    <div class="action-group nav-actions">
                        <button id="back-to-list-btn" class="btn btn-secondary">
                            <span class="icon">⬅️</span>
                            返回列表
                        </button>
                    </div>
                </div>
            </section>

            <section class="card" id="help-panel" style="display:none;">
                <h2>帮助信息</h2>
                <div class="help-content">
                    <h3>NAT类型说明</h3>
                    <p>Natter主要用于穿透Full-cone NAT (NAT
                        1)，在这种NAT类型下，一旦内部地址和端口被映射到外部地址和端口，任何外部主机都可以通过向该外部地址和端口发送数据包与内部主机通信。</p>

                    <h3>转发方法说明</h3>
                    <ul>
                        <li><strong>socket</strong>: 内置方法，纯Python实现，无需额外依赖</li>
                        <li><strong>iptables</strong>: 使用Linux的iptables进行转发，需要root权限</li>
                        <li><strong>nftables</strong>: 使用Linux的nftables进行转发，需要root权限 <span
                                style="color:#ff6b6b;font-size:0.9em;">(在Docker容器中不可用)</span></li>
                        <li><strong>socat</strong>: 使用socat工具转发，需要安装socat</li>
                        <li><strong>gost</strong>: 使用gost工具转发，需要安装gost</li>
                    </ul>

                    <h3>常见问题</h3>
                    <div class="faq-item">
                        <div class="faq-question">无法获取映射地址？</div>
                        <div class="faq-answer">可能原因：1) NAT类型不是Full-cone；2) STUN服务器不可用；3) 防火墙阻止了UDP流量。</div>
                    </div>
                    <div class="faq-item">
                        <div class="faq-question">外部无法访问映射端口？</div>
                        <div class="faq-answer">可能原因：1) NAT类型不支持；2) 防火墙阻止了入站连接；3) ISP可能阻止了特定端口。</div>
                    </div>
                    <div class="faq-item">
                        <div class="faq-question">服务频繁断开？</div>
                        <div class="faq-answer">尝试减少保活间隔时间，或检查网络连接稳定性。</div>
                    </div>

                    <button id="close-help-btn" class="btn btn-secondary">关闭帮助</button>
                </div>
            </section>

            <section class="card" id="templates-panel" style="display:none;">
                <h2>配置模板</h2>
                <div class="templates-list" id="templates-list">
                    <div class="loading">
                        <div class="loading-spinner"></div>
                        加载中...
                    </div>
                </div>
                <div class="templates-actions">
                    <button id="back-from-templates-btn" class="btn btn-secondary">返回</button>
                </div>
            </section>

            <section class="card" id="groups-panel" style="display:none;">
                <h2>服务组管理</h2>
                <div class="groups-management">
                    <div class="form-group">
                        <label for="new-group-name">新建分组:</label>
                        <div class="group-input-container">
                            <input type="text" id="new-group-name" placeholder="输入分组名称" style="margin-bottom: 10px;">
                            <input type="password" id="new-group-password" placeholder="输入分组密码（访客使用）"
                                style="margin-bottom: 10px;">
                            <button id="add-group-btn" class="btn btn-primary">添加分组</button>
                        </div>
                        <small>为服务创建分组，便于管理和组织。密码用于访客登录该分组。</small>
                    </div>

                    <div class="groups-list-container">
                        <h3>现有分组</h3>
                        <div class="groups-list" id="groups-list">
                            <div class="loading">
                                <div class="loading-spinner"></div>
                                加载中...
                            </div>
                        </div>
                    </div>

                    <div class="batch-operations">
                        <h3>批量操作</h3>
                        <div class="batch-controls">
                            <div class="batch-select-container">
                                <label for="batch-source-group">源分组</label>
                                <select id="batch-source-group">
                                    <option value="">选择源分组...</option>
                                </select>
                                <div class="source-services-preview" id="source-services-preview">
                                    <small>请先选择源分组</small>
                                </div>
                            </div>
                            <div class="batch-arrow">→</div>
                            <div class="batch-select-container">
                                <label for="batch-target-group">目标分组</label>
                                <select id="batch-target-group">
                                    <option value="">选择目标分组...</option>
                                </select>
                                <div class="target-services-info" id="target-services-info">
                                    <small>请先选择目标分组</small>
                                </div>
                            </div>
                        </div>
                        <div class="batch-action-area">
                            <button id="batch-move-btn" class="btn btn-warning" disabled>批量移动</button>
                            <div class="batch-preview" id="batch-preview" style="display: none;">
                                <div class="preview-summary">
                                    <strong>预览：</strong>
                                    <span id="preview-text">将要移动 0 个服务</span>
                                </div>
                            </div>
                        </div>
                        <small>将服务从一个分组批量移动到另一个分组。选择分组后将显示包含的服务列表。</small>
                    </div>

                    <div class="group-actions">
                        <button id="back-from-groups-btn" class="btn btn-secondary">返回</button>
                    </div>
                </div>
            </section>

            <section class="card" id="iyuu-panel" style="display:none;">
                <h2>IYUU推送设置</h2>
                <div class="iyuu-settings">
                    <div class="form-group">
                        <label for="iyuu-enabled">
                            <input type="checkbox" id="iyuu-enabled">
                            启用IYUU推送
                        </label>
                        <small>开启后服务启动、停止、地址变动等事件将通过IYUU发送通知</small>
                    </div>

                    <div class="form-group">
                        <label>IYUU令牌:</label>
                        <div id="iyuu-tokens-list" class="tokens-list">
                            <div class="loading">
                                <div class="loading-spinner"></div>
                                加载中...
                            </div>
                        </div>
                        <div class="token-actions">
                            <input type="text" id="new-iyuu-token" placeholder="输入IYUU令牌">
                            <button id="add-iyuu-token" class="btn btn-primary">添加令牌</button>
                        </div>
                        <small>支持多个令牌，获取令牌请访问 <a href="https://iyuu.cn" target="_blank">https://iyuu.cn</a></small>
                    </div>

                    <div class="form-group">
                        <label for="iyuu-schedule-enabled">
                            <input type="checkbox" id="iyuu-schedule-enabled">
                            启用每日定时推送
                        </label>
                        <small>按设定时间发送服务状态摘要，支持多个时间段</small>
                    </div>

                    <div class="form-group" id="iyuu-schedule-options">
                        <label>推送时间:</label>
                        <div id="schedule-times-list" class="schedule-times-list">
                            <!-- 时间段列表将通过JS动态添加 -->
                        </div>
                        <div class="time-actions">
                            <input type="time" id="new-schedule-time" value="08:00">
                            <button id="add-schedule-time" class="btn btn-primary">添加时间</button>
                        </div>
                        <small>每天的这些时间将发送服务状态摘要</small>
                    </div>

                    <div class="form-group">
                        <label for="iyuu-schedule-message">推送标题:</label>
                        <input type="text" id="iyuu-schedule-message" placeholder="每日服务状态摘要标题">
                        <small>定时推送的消息标题</small>
                    </div>

                    <div class="form-group">
                        <label>立即推送:</label>
                        <div class="push-now-actions">
                            <button id="push-all-services" class="btn btn-primary">推送所有服务状态</button>
                        </div>
                        <small>立即发送一次当前所有服务的状态报告</small>
                    </div>

                    <div class="iyuu-actions">
                        <button id="test-iyuu-push" class="btn btn-secondary">测试推送</button>
                        <button id="save-iyuu-settings" class="btn btn-primary">保存设置</button>
                        <button id="back-from-iyuu-btn" class="btn btn-secondary">返回</button>
                    </div>
                </div>
            </section>
        </main>

        <footer>
            <p>Natter Web管理界面 v<span id="version">加载中...</span> &copy; 2025</p>
            <div style="margin-top:8px;font-size:15px;">
                项目地址：
                <a href="https://gitee.com/await29/natter-web" target="_blank"
                    style="margin:0 8px;color:#00b3ff;text-decoration:none;font-weight:bold;">Gitee</a>
                |
                <a href="https://github.com/Await-d/natter-web" target="_blank"
                    style="margin:0 8px;color:#222;text-decoration:none;font-weight:bold;">GitHub</a>
            </div>
        </footer>
    </div>

    <!-- 服务卡片模板 -->
    <template id="service-card-template">
        <div class="service-card" data-id="">
            <div class="service-card-header">
                <div class="service-title-section">
                    <h3 class="service-title">
                        <span class="service-remark-display">服务名称</span>
                        <span class="service-status service-status-unknown">未知</span>
                    </h3>
                    <p class="service-address-display">
                        <span class="address-label">📍 映射地址：</span>
                        <span class="service-address">未映射</span>
                        <button class="btn-icon copy-address-btn" title="复制地址">📋</button>
                        <button class="btn-icon quick-jump-btn" title="在新窗口打开地址" style="display: none;">🔗</button>
                    </p>
                </div>
            </div>
            <div class="service-card-body">
                <div class="service-metrics">
                    <div class="metric-item">
                        <span class="metric-label">LAN</span>
                        <span class="metric-value lan-status">检测中</span>
                    </div>
                    <div class="metric-item">
                        <span class="metric-label">WAN</span>
                        <span class="metric-value wan-status">检测中</span>
                    </div>
                    <div class="metric-item">
                        <span class="metric-label">运行时间</span>
                        <span class="metric-value runtime">计算中</span>
                    </div>
                </div>

                <div class="service-info">
                    <div class="info-row">
                        <span class="info-label">🏷️ 分组：</span>
                        <span class="service-group-text">默认分组</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">💻 命令：</span>
                        <span class="service-cmd-text">未知</span>
                    </div>
                </div>

                <div class="service-card-actions">
                    <div class="action-group primary-actions">
                        <button class="btn btn-sm btn-primary service-detail-btn" title="查看详情">
                            ℹ️ 详情
                        </button>
                        <button class="btn btn-sm btn-info service-quick-status-btn" title="快速查看运行状态">
                            📊 状态
                        </button>
                        <button class="btn btn-sm btn-warning service-restart-btn" title="快速重启服务">
                            🔄 重启
                        </button>
                    </div>
                    <div class="action-group danger-actions">
                        <button class="btn btn-sm btn-danger service-stop-btn" title="停止服务">
                            ⏹️ 停止
                        </button>
                        <button class="btn btn-sm btn-outline-danger service-delete-btn" title="删除服务">
                            🗑️ 删除
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <!-- 模板卡片模板 -->
    <template id="template-card-template">
        <div class="template-card" data-id="">
            <div class="template-card-header">
                <h3 class="template-name">未命名模板</h3>
                <span class="template-date">创建时间</span>
            </div>
            <div class="template-card-body">
                <div class="template-description">描述: </div>
                <div class="template-cmd-args">命令: </div>
            </div>
            <div class="template-card-footer">
                <button class="btn btn-primary use-template-btn">使用此模板</button>
                <button class="btn btn-danger delete-template-btn">删除</button>
            </div>
        </div>
    </template>

    <!-- 分组卡片模板 -->
    <template id="group-card-template">
        <div class="group-card" data-group-id="">
            <div class="group-card-header">
                <span class="group-name">分组名称</span>
                <span class="group-service-count">0 个服务</span>
            </div>
            <div class="group-password-section">
                <div class="password-display">
                    <label class="password-label">访客密码:</label>
                    <div class="password-field">
                        <span class="password-value" data-password="">••••••••</span>
                        <button class="btn-icon password-toggle-btn" title="显示/隐藏密码">👁️</button>
                    </div>
                </div>
            </div>
            <div class="group-services-list">
                <!-- 服务列表将通过JavaScript动态添加 -->
            </div>
            <div class="group-actions">
                <button class="btn btn-small btn-info view-password-btn">查看密码</button>
                <button class="btn btn-small btn-secondary edit-password-btn">修改密码</button>
                <button class="btn btn-small btn-warning rename-group-btn">重命名</button>
                <button class="btn btn-small btn-danger delete-group-btn">删除分组</button>
            </div>
        </div>
    </template>

    <!-- 保存模板对话框 -->
    <div id="save-template-dialog" class="dialog">
        <div class="dialog-content">
            <h3>保存为模板</h3>
            <div class="form-group">
                <label for="template-name">模板名称:</label>
                <input type="text" id="template-name" placeholder="给模板起个名字">
            </div>
            <div class="form-group">
                <label for="template-description">描述:</label>
                <textarea id="template-description" placeholder="描述这个模板的用途"></textarea>
            </div>
            <div class="dialog-buttons">
                <button id="confirm-save-template" class="btn btn-primary">保存</button>
                <button id="cancel-save-template" class="btn btn-secondary">取消</button>
            </div>
        </div>
    </div>

    <!-- 修改分组密码对话框 -->
    <div id="edit-group-password-dialog" class="password-edit-dialog">
        <div class="password-edit-content">
            <h3>修改分组密码</h3>
            <div class="form-group">
                <label>分组名称:</label>
                <div id="editing-group-name" class="current-password-display">
                    <span class="group-name-text">分组名称</span>
                </div>
            </div>
            <div class="form-group">
                <label>当前密码:</label>
                <div class="current-password-display">
                    <span id="current-password-text" class="password-text">当前密码</span>
                </div>
            </div>
            <div class="form-group">
                <label for="new-group-password-input">新密码:</label>
                <input type="password" id="new-group-password-input" placeholder="输入新的访客密码">
                <small>访客将使用此密码登录到该分组</small>
            </div>
            <div class="dialog-buttons">
                <button id="confirm-edit-password" class="btn btn-primary">确认修改</button>
                <button id="cancel-edit-password" class="btn btn-secondary">取消</button>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>

</html>